<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 and CSS3</title>
    <link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
	<div class="wrapper">
		<div class="infoHeader PT10 PB10">
			<span class="FL">Meet someone special. MSN Dating.</span>
			<time datetime="2007-02-07">Sunday, February 07, 2010</time>
			<a href="#" class="FR">Make this your homepage</a>
		</div>
		<div class="innerWrapper">
			<header class="mainHeader">
				<section class="headerCont">
					<div class="logoCont">
						<figure><img alt="" src="images/msnLogo.jpg" width="98" height="48" /></figure>
						<nav class="localeList">
							<ul>
								<li><a href="#" class="active">Canada</a></li>
								<li class="noBrdr"><a href="#">Francais</a></li>
							</ul>
						</nav>
					</div>
					<div class="searchCont FL">
						<ul>
							<li class="active"><a href="#">Web</a></li>
							<li><a href="#">Images</a></li>
							<li><a href="#">News</a></li>
							<li><a href="#">Maps</a></li>
							<li><a href="#" class="noBrdr">Videos</a></li>
						</ul>
						<div class="CL"></div>
						<div class="searchBox">
							<div class="searchInput">
								<input type="search" name="search_keyword" />
							</div>
						</div>
						<p class="w_12 MT10"><input type="checkbox" value="1" name="canadaFlag" class="MT2 MR5 FL" /> Canada only</p>
					</div>
					<nav class="quickLinks">
						<ul>
							<li><a href="#"><span class="hotmailIco MB10"></span><br/>Hotmail</a></li>
							<li><a href="#"><span class="messngerBIco MB10"></span><br/>Messenger</a></li>
							<li><a href="#"><span class="myMSNIco MB10"></span><br/>My MSN</a></li>
						</ul>
					</nav>
				</section>
				<div class="mainNav">
					<nav>
						<ul>
							<li><a href="#">Autos</a></li>
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">News</a></li>
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Money</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Shop</a></li>
							<li><a href="#">Sports</a></li>
							<li><a href="#">Tech</a></li>
							<li><a href="#">Travel</a></li>
							<li><a href="#">Video</a></li>
							<li><a href="#">Weather</a></li>
							<li><a href="#">More</a></li>
						</ul>
					</nav>
					<ul class="userActions">
						<li><a href="#">Sign in</a></li>
						<li><a href="#">Options</a></li>
					</ul>
				</div>
			</header>
			<div class="mainCont">
				<section class="left">
					<div class="viewList MB15">
						<div class="list">
							<ul>
								<li>
									<a href="#" class="active">
										<figure class="FL"><img alt="" src="images/listImg1.jpg"/></figure>
										<header>
											<h5>Saints win Super Bowl</h5>
										</header>
									</a>
								</li>
								<li>
									<a href="#">
										<figure class="FL"><img alt="" src="images/listImg1.jpg"/></figure>
										<header>
											<h5>9-11 health lawsuits</h5>
										</header>
									</a>
								</li>
								<li>
									<a href="#">
										<figure class="FL"><img alt="" src="images/listImg1.jpg"/></figure>
										<header>
											<h5>Our Canadian Olympians bare all</h5>
										</header>
									</a>
								</li>
								<li>
									<a href="#">
										<figure class="FL"><img alt="" src="images/listImg1.jpg"/></figure>
										<header>
											<h5>Pedestrian safety 101</h5>
										</header>
									</a>
								</li>
								<li>
									<a href="#">
										<figure class="FL"><img alt="" src="images/listImg1.jpg"/></figure>
										<header>
											<h5>How you can shop till you drop -  for a living</h5>
										</header>
									</a>
								</li>
							</ul>
						</div>
						<aside class="viewListArticle">
							<article>
								<header><h3>Saints douse Colts in historic Super Bowl victory</h3></header>
								<figure class="FL"><img alt="" src="images/saintsArticleImg.jpg"/></figure>
								<p>First time New Orleans team goes all the way to the top... <a href="#">More</a></p>
								<ul class="bl_bulletList MB15 MT10">
									<li><a href="#">Higlights of the game</a> <span class="camIco"></span></li>
									<li><a href="#">Watch the Super Bowl ads</a> <span class="playIco"></span></li>
								</ul>
								<p class="bold">More on MSN</p>
								<ul class="bl_bulletList">
									<li><a href="#">Psst! Sneaky ways to suck up to your boss</a></li>
									<li><a href="#">Solve wardrobe woes:Purge</a></li>
									<li><a href="#">Meet the rockstars of the financial world</a></li>
								</ul>
							</article>
						</aside>
					</div>
					<section class="gryHeaderBox twoCols  MB15">
						<article>
							<header>
								<h3 class="FL noBrdr">News</h3>
								<div class="r_Brdr PR10 FR">
									<ul class="buttonTabList">
										<li><a href="#" class="active">CBC</a></li>
										<li><a href="#">BBC</a></li>
										<li><a href="#">MSNBC</a></li>
										<li><a href="#">Local</a></li>
									</ul>
								</div>
							</header>
							<div class="cont">
								<figure class="MR10 MB10 FL"><img alt="" src="images/connecticutPowerPlant.jpg"/></figure>
								<header><h5>5 known dead in Connecticut power plant blast</h5></header>
								<ul class="bl_bulletList">
									<li><a href="#">Yanukovych claims victory in Ukraine election</a></li>
									<li><a href="#">Brees leades Saints to 1st Super Bowl win</a></li>
									<li><a href="#">Costa Ricans to get 1st women president</a></li>
									<li><a href="#">Iran to produce higher-enriched uranium</a></li>
									<li><a href="#">Argentina's ex-president has surgery</a></li>
									<li><a href="#">Karzai may insititute conscription</a></li>
									<li><a href="#">Karzai may insititute conscription</a></li>
								</ul>
							</div>
						</article>
						<article>
							<header><h3 class="noBrdr">Money</h3></header>
							<div class="cont l_Brdr">
								<figure class="MR10 MB10 FL"><img alt="" src="images/financeAdvImg.jpg"/></figure>
								<header><h5>Where are they now?</h5></header>
								<ul class="bl_bulletList">
									<li><a href="#">Expert financial advice</a></li>
									<li><a href="#">By back pension years?</a></li>
									<li><a href="#">Financial vs. DIY</a></li>
									<li><a href="#">Super Bowl $$ stats</a><span class="statsIco"></span></li>
								</ul>
								<div class="tabListCont">
									<ul class="CL">
										<li><a href="#">Auto insurance</a></li>
										<li><a href="#">C$</a></li>
										<li><a href="#">BNN</a></li>
										<li><a href="#">Blog</a></li>
										<li class="noBrdr"><a href="#">Small biz</a></li>
									</ul>
									<div class="content MT10">
										<table class="MT5">
											<tr>
												<td><span class="negIco"></span><a href="#">S&amp;P/TSX</a></td>
												<td>11,223.12</td>
												<td>unch(N/A)</td>
											</tr>
											<tr>
												<td><span class="upIco"></span><a href="#">Dow Jones</a></td>
												<td>10,012.23</td>
												<td class="upTd">+10.05(+0.1%)</td>
											</tr>
											<tr>
												<td><span class="upIco"></span><a href="#">CAD USD</a></td>
												<td>0.9359</td>
												<td class="upTd">+ 0.0008(+0.09%)</td>
											</tr>
										</table>
										<div class="searchPanel MT10">
											<input type="search" name="search_symbol" value="symbol" />
											<select>
												<option value="0">Mkt</option>
												<option value="1">Mkt</option>
												<option value="2">Mkt</option>
												<option value="3">Mkt</option>
											</select>
											<select>
												<option value="0">Get Quote</option>
												<option value="1">Get Quote</option>
												<option value="2">Get Quote</option>
												<option value="3">Get Quote</option>
											</select>
											<a href="#" class="gr_Btn">Go</a>
										</div>
									</div>
								</div>
								
							</div>
						</article>
					</section>
					<section class="gryHeaderBox threeCols  MB15">
						<article>
							<header><h3>Entertainment</h3></header>
							<div class="cont leftBrdr">
								<figure><img alt="" src="images/valentinesPlansImg.jpg"/></figure>
								<header><h5>Valentine's plans of the stars</h5></header>
								<ul class="bl_bulletList">
									<li><a href="#">What to watch this week</a></li>
									<li><a href="#">Malin Akerman can't believe life on the hot list</a></li>
									<li><a href="#">Celebs first class airport style</a></li>
								</ul>
							</div>
						</article>
						<article>
							<header><h3>Video</h3></header>
							<div class="cont leftBrdr">
								<figure><img alt="" src="images/kerrsurfingImg.jpg"/></figure>
								<header><h5>Broke caught Kerr-surfing</h5></header>
								<ul class="bl_bulletList">
									<li><a href="#">Brittany Murphy cause of death</a></li>
									<li><a href="#">Casey Johnson autopsy results</a></li>
									<li><a href="#">Jackson's doctor to surrender</a></li>
									<li><a href="#">Nick Jonas dating Selena</a></li>
								</ul>
							</div>
						</article>
						<article>
							<header><h3 class="noBrdr FL">Lifestyle</h3><a href="#" class="gry_dblArrow_Btn FR"></a></header>
							<div class="cont leftBrdr">
								<figure><img alt="" src="images/jenniferGarner.jpg"/></figure>
								<header><h5>Jennifer Garner's best hairstyles</h5></header>
								<ul class="bl_bulletList">
									<li><a href="#">Why he loves your weird quirks</a></li>
									<li><a href="#">8 delicious, low-calorie dinner ideas for two</a></li>
									<li><a href="#">5 handbags every woman needs</a></li>
								</ul>
							</div>
						</article>
					</section>
					<section class="gryHeaderBox threeCols  MB15">
						<article>
							<header><h3>Sports</h3></header>
							<div class="cont leftBrdr">
								<figure><img alt="" src="images/saintsImg.jpg"/></figure>
								<header><h5>Brees leads Saints to 1st Super</h5></header>
								<ul class="bl_bulletList">
									<li><a href="#">What to watch this week</a></li>
									<li><a href="#">Malin Akerman can't believe life on the hot list</a></li>
									<li><a href="#">Celebs first class airport style</a></li>
								</ul>
							</div>
						</article>
						<article>
							<header><h3>Autos</h3></header>
							<div class="cont leftBrdr">
								<figure><img alt="" src="images/pollutingCars.jpg"/></figure>
								<header><h5>Top 10: Most polluting cars</h5> <span class="camIco"></span></header>
								<ul class="bl_bulletList">
									<li><a href="#">Brittany Murphy cause of death</a></li>
									<li><a href="#">Casey Johnson autopsy results</a></li>
									<li><a href="#">Jackson's doctor to surrender</a></li>
									<li><a href="#">Nick Jonas dating Selena</a></li>
								</ul>
							</div>
						</article>
						<article>
							<header><h3 class="noBrdr">Tech &amp; Gadgets</h3></header>
							<div class="cont leftBrdr">
								<figure><img alt="" src="images/mirandaKerr.jpg"/></figure>
								<header><h5>Mirands Kerr defends Aussies</h5></header>
								<ul class="bl_bulletList">
									<li><a href="#">Why he loves your weird quirks</a></li>
									<li><a href="#">8 delicious, low-calorie dinner ideas for two</a></li>
									<li><a href="#">5 handbags every woman needs</a></li>
								</ul>
							</div>
						</article>
					</section>
				</section>
				<aside class="right">
					<section class="flashCont MB15">
						<div class="flash">
							<div class="earth"></div>
							<div class="space"></div>
							<div class="carBg"></div>
						</div>
					</section>
					<section class="blHeaderBox MB15">
						<header><span class="weatherIco FL MR5"></span><h3>Weather</h3><a href="#" class="bl_dblArrow_Btn FR"></a><span class="FR w_14 MR5">&deg;C | &deg;F</span></header>
						<div class="cont">
							<p class="PL10 PR10 PT15 PB15">Get local forecasts by entering city names or postal codes into the field below and press the Go button.</p>
							<div class="forecastBox">
								<input type="search" name="search_forecast" value="Get forecast of city" />
								<a href="#" class="gr_Btn">GO</a>
							</div>
							
						</div>
					</section>
					<section class="blHeaderBox MB15">
						<header><span class="mailIco FL MR5"></span><h3>Hotmail</h3><a href="#" class="bl_dblArrow_Btn FR"></a></header>
						<div class="cont PA10">
							<p>This module requires a current Window Live Hotmail account. Sign in to view your inbox on MSN.</p>
							<a href="#">Sign In</a>
							<p class="MT15"><span class="windowsIco FL MR5"></span><span class="bl_14">Windows Live Hotmail</span></p>
							<p class="MB15">Brings you more. More space(5GB), more security, and still free.</p>
							<a href="#">Sign Up Today</a>
						</div>
					</section>
					<section class="blHeaderBox MB15">
						<header><span class="messngerIco FL MR5"></span><h3>Messenger</h3><a href="#" class="bl_dblArrow_Btn FR"></a></header>
						<div class="cont PA10">
							<p>This module requires a current Window Live Hotmail account. Sign in to view your inbox on MSN.</p>
							<a href="#" class="MT5">Sign In</a>
							<p class="MT15"><span class="windowsIco FL MR5"></span><span class="bl_14">Windows Live Hotmail</span></p>
							<p class="MB10">Windows Live Messenger makes it easier than ever to stay connected to the people you care about.</p>
							<a href="#">Download</a>
						</div>
					</section>
					<section class="blHeaderBox MB15">
						<header><span class="graphIco FL MR5"></span><h3>Question of the day</h3><a href="#" class="bl_dblArrow_Btn FR"></a></header>
						<div class="cont PA10">
							<form action="#" class="formCont" method="Post">
								Will you be tuning in to watch the Vancouver Winter Games?
								<ul>
									<li><input type="radio" name="VanWinterGames" value="1" /><label>Definitely!</label></li>
									<li><input type="radio" name="VanWinterGames" value="2" /><label>I'll probably watch a few events</label></li>
									<li><input type="radio" name="VanWinterGames" value="3" /><label>No,I'm going to Vancouver!</label></li>
								</ul>
							</form>
						</div>
					</section>
				</aside>
			</div>
		</div>
	</div>
</body>
</html>
